<template>
  <el-container style="position:absolute;right:15%;left:15%;width: 70%;height: 100%;background-color:#ffffff;">
    <el-main>
      <div style="height:auto">
        <el-carousel
          indicator-position="outside"
          height="300px"
          ref="carousel"
          @click.native="linkTo"
        >
          <el-carousel-item
            v-for="(item,index) in imglist"
            :key="index"
            style="cursor:pointer"
            class="el-carousel__item"
          >
            <img
              class="carousel-image"
              v-bind:src="item.url"
              alt="Loading"
            >
          </el-carousel-item>
        </el-carousel>

        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          style="margin-left:17%;margin-top:2%;margin-right:17%;height:auto"
        >
          <el-tab-pane
            label="推荐赛事"
            name="first"
          >
            <div>
              <div
                v-for="(item,index) in recommend"
                :key="index"
                style="text-align:left"
              >
                <span style="font-size:16px;color:#22BFA7">赛事名称：</span>
                <a style="font-size:22px;font-weight:bold">{{item.name}}</a>
                <br>

                <span style="margin-left:38px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  级别：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.level}}</span>
                </span>
                <br>

                <span style="margin-left:25px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  主办方：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.time}}</span>
                </span>

                <el-button
                  plain
                  style="color:#0074B6;margin-left:500px"
                  @click="details(item)"
                >了解详情</el-button>
                <el-divider></el-divider>
              </div>

              <div style="height:100px;text-align:center">
                <a
                  v-on:mouseenter="enter"
                  id="load"
                  @click='loadmore("number")'
                  style="cursor:pointer"
                >
                  <span v-if='number<recommend.length'>
                    点击加载更多
                  </span>

                  <span v-if='number>=recommend.length'>
                    暂无更多
                  </span>
                </a>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="外语学院"
            name="second"
          >
            <div>
              <div
                v-for="(item,index) in english"
                :key="index"
                style="text-align:left"
              >
                <span style="font-size:16px;color:#22BFA7">赛事名称：</span>
                <a style="font-size:22px;font-weight:bold">{{item.name}}</a>
                <br>

                <span style="margin-left:38px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  级别：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.level}}</span>
                </span>
                <br>

                <span style="margin-left:25px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  主办方：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.time}}</span>
                </span>

                <el-button
                  plain
                  style="color:#0074B6;margin-left:500px"
                  @click="details(item)"
                >了解详情</el-button>
                <el-divider></el-divider>
              </div>

              <div style="height:200px;text-align:center">
                <a
                  v-on:mouseenter="enter"
                  id="load"
                  style="cursor:pointer"
                  @click='loadmore("English")'
                >
                  <span v-if='English<english.length'>
                    点击加载更多
                  </span>

                  <span v-if='English>=english.length'>
                    暂无更多
                  </span>
                </a>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="理学院"
            name="third"
          >
            <div>
              <div
                v-for="(item,index) in math"
                :key="index"
                style="text-align:left"
              >
                <span style="font-size:16px;color:#22BFA7">赛事名称：</span>
                <a style="font-size:22px;font-weight:bold">{{item.name}}</a>
                <br>

                <span style="margin-left:38px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  级别：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.level}}</span>
                </span>
                <br>

                <span style="margin-left:25px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  主办方：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.time}}</span>
                </span>

                <el-button
                  plain
                  style="color:#0074B6;margin-left:500px"
                  @click="details(item)"
                >了解详情</el-button>
                <el-divider></el-divider>
              </div>

              <div style="height:200px;text-align:center">
                <a
                  v-on:mouseenter="enter"
                  id="load"
                  style="cursor:pointer"
                  @click='loadmore("Math")'
                >
                  <span v-if='Math1<math.length'>
                    点击加载更多
                  </span>

                  <span v-if='Math1>=math.length'>
                    暂无更多
                  </span>
                </a>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="光电学院"
            name="fourth"
          >
            <div>
              <div
                v-for="(item,index) in computer"
                :key="index"
                style="text-align:left"
              >
                <span style="font-size:16px;color:#22BFA7">赛事名称：</span>
                <a style="font-size:22px;font-weight:bold">{{item.name}}</a>
                <br>

                <span style="margin-left:38px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  级别：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.level}}</span>
                </span>
                <br>

                <span style="margin-left:25px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  主办方：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.time}}</span>
                </span>

                <el-button
                  plain
                  style="color:#0074B6;margin-left:500px"
                  @click="details(item)"
                >了解详情</el-button>
                <el-divider></el-divider>
              </div>

              <div style="height:200px;text-align:center">
                <a
                  v-on:mouseenter="enter"
                  id="load"
                  style="cursor:pointer"
                  @click='loadmore("Computer")'
                >
                  <span v-if='Computer<computer.length'>
                    点击加载更多
                  </span>

                  <span v-if='Computer>=computer.length'>
                    暂无更多
                  </span>
                </a>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="管理学院"
            name="fifth"
          >
            <div>
              <div
                v-for="(item,index) in manage"
                :key="index"
                style="text-align:left"
              >
                <span style="font-size:16px;color:#22BFA7">赛事名称：</span>
                <a style="font-size:22px;font-weight:bold">{{item.name}}</a>
                <br>

                <span style="margin-left:38px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  级别：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.level}}</span>
                </span>
                <br>

                <span style="margin-left:25px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  主办方：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.time}}</span>
                </span>

                <el-button
                  plain
                  style="color:#0074B6;margin-left:500px"
                  @click="details(item)"
                >了解详情</el-button>
                <el-divider></el-divider>
              </div>

              <div style="height:200px;text-align:center">
                <a
                  v-on:mouseenter="enter"
                  id="load"
                  style="cursor:pointer"
                  @click='loadmore("Devise")'
                >
                  <span v-if='Devise<manage.length'>
                    点击加载更多
                  </span>

                  <span v-if='Devise>=manage.length'>
                    暂无更多
                  </span>
                </a>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="机械学院"
            name="sixth"
          >
            <div>
              <div
                v-for="(item,index) in mechanic"
                :key="index"
                style="text-align:left"
              >
                <span style="font-size:16px;color:#22BFA7">赛事名称：</span>
                <a style="font-size:22px;font-weight:bold">{{item.name}}</a>
                <br>

                <span style="margin-left:38px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  级别：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.level}}</span>
                </span>
                <br>

                <span style="margin-left:25px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  主办方：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.time}}</span>
                </span>

                <el-button
                  plain
                  style="color:#0074B6;margin-left:500px"
                  @click="details(item)"
                >了解详情</el-button>
                <el-divider></el-divider>
              </div>

              <div style="height:200px;text-align:center">
                <a
                  v-on:mouseenter="enter"
                  id="load"
                  style="cursor:pointer"
                  @click='loadmore("Bigdata")'
                >
                  <span v-if='Bigdata<mechanic.length'>
                    点击加载更多
                  </span>

                  <span v-if='Bigdata>=mechanic.length'>
                    暂无更多
                  </span>
                </a>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      imglist:[
        {url:require('../assets/比赛2.jpg'),link:"https://www.saikr.com/vse/mathorcup/2020"},
        {url:require('../assets/usstacm.jpg'),link:"http://cec.usst.edu.cn/2019/1203/c6739a198259/page.htm"},
      ],
      activeName: 'first',
      number: 6, // 储存当前页面显示多少项
      English: 6,
      Math1: 6,
      Devise: 6,
      Bigdata: 6,
      Computer: 6,
      english:[
        { id: 1, name: '全国大学生英语竞赛（NECCS）', time: '高等学校大学外语教学指导委员会，高等学校大学外语教学研究会', level: '国家A级' ,url:"http://www.chinaneccs.cn/"},
        { id: 2, name: '“希望之星”英语风采大赛', time: '中央电视台', level: '国家A级' ,url:"http://www.staroutlook.com/index"},
        { id: 3, name: '“挑战杯”中国大学生创业计划竞赛', time: '共青团中央', level: '国家A级' ,url:"http://www.tiaozhanbei.net/"},
        { id: 4, name: '中国“互联网+”大学生创新创业大赛', time: '中国教育部', level: '国家A级' ,url:"https://cy.ncss.org.cn/"},
        { id: 5, name: '“外研社杯”全国大学生英语辩论赛', time: '外语教学与研究出版社', level: '国家A级' ,url:"http://old.fltrp.com/wyzx/bianlundasai/default.cfm"},
        { id: 6, name: '上海市商业英语辩论大赛', time: '中国学术英语教学研究会、上海高校大学英语教学指导委员会', level: '国家B级' ,url:"https://www.wjx.cn/jq/38236325.aspx"},
        { id: 7, name: '海峡两岸口译大赛', time: '海峡两岸口译大赛组委会、厦门大学、台湾翻译学会', level: '国家A级' ,url:"xiadakouyi.com/dasai.htm"},
        { id: 8, name: '中国大学生5分钟科研英语演讲大赛', time: '中国学术英语教学研究会', level: '国家B级' ,url:"https://www.ulearning.cn/eventjudge/visitor/getContestByID.do?contestID=152"},
        { id: 9, name: '“外研社∙国才杯”全国大学生英语演讲大赛校内赛', time: '上海理工大学英语学院', level: '校级' ,url:"http://waiyu.usst.edu.cn/2019/0423/c5572a144765/page.htm"},
      ],
      math:[
        {id: 1, name: '大学生数学建模竞赛(CUMCM)', time: '教育部高等教育司 、中国工业与应用数学学会', level: '国家A级',url:"http://www.mcm.edu.cn/"},
        {id: 2, name: '美国大学生数学建模竞赛', time: '美国工业与应用数学学会、美国运筹及管理科学研究所、美国国家安全局', level: 'A级',url:"https://www.comap.com/undergraduate/contests/"},
        {id: 3, name: '全国创新物理大赛', time: '全国高校招生研究协作组', level: '国家A级',url:"http://www.chuangxinwuli.com/"},
      ],
      manage:[
        { id: 1, name: '全国大学生物流设计大赛', time: '教育部高等学校物流类专业教学指导委员会', level: '国家A级',url:"http://www.clpp.org.cn/html/competition/"},
        { id: 2, name: '国际企业管理挑战赛', time: 'CEL', level: '国际赛事',url:"http://www.gmc-china.net/index.php?m=content&c=index&a=lists&catid=63"},
        { id: 3, name: '“尖峰时刻”全国模拟挑战赛', time: '中国发展中管理与创业教育联盟', level: '国家A级',url:"www.peaktime.org"},
        { id: 4, name: '全国高校百商业精英挑战赛', time: '中国国际商会商业行业商会、中国商业会计学会', level: '国家A级',url:"http://www.ccpitedu.com/index.aspx"},
      ],
      computer:[
        { id: 1, name: '全国大学生软件创新大赛', time: '全国大学生软件创新大赛组织委员会', level: '国家A级',url:"http://www.swcontest2020.com/"},
        { id: 2, name: '全国大学生电子设计竞赛', time: '全国竞赛组织委员会由教育部、工业和信息化部、部分参赛省市教育主管部门负责人', level: '国家A级',url:"http://nuedc.xjtu.edu.cn/"},
        { id: 3, name: '中国大学生程序设计竞赛', time: '中国大学生程序设计竞赛协会', level: '国家A级',url:"https://ccpc.io/"},
        { id: 4, name: '全国高校计算机能力挑战赛', time: '全国高等学校计算机教育研究会', level: '国家A级',url:"http://www.ncccu.org.cn/"},
        { id: 5, name: '蓝桥杯全国软件和信息技术专业人才大赛', time: '工业和信息化部人才交流中心', level: '国家B级',url:"https://www.lanqiao.cn/"},
      ],
      mechanic:[
        { id: 1, name: '“飞思卡尔杯”全国大学生智能车竞赛', time: '高等学校自动化专业教学指导分委员会', level: '国家A级',url:"http://www.eepw.com.cn/event/action/freescale_car2012/"},
        { id: 2, name: '全国大学生机械创新设计大赛', time: '北京中教仪科技有限公司', level: '国家A级',url:"http://umic.ckcest.cn/"},
        { id: 3, name: '中国机器人大赛', time: '中国自动化学会', level: '国家A级',url:"http://crc.drct-caa.org.cn/index.php/race?catid=3"},
        { id: 4, name: '周培源大学生力学竞赛', time: '教育部高等教育司、中国力学学会', level: '国家级',url:"http://zpy.cstam.org.cn/templates/jiaoyu_001/index.aspx?nodeid=54&tohtml=false"},
        { id: 5, name: '上海理工大学智能车校内赛', time: '上海理工大学机械学院', level: '校级',url:"http://me.usst.edu.cn/2019/1213/c3262a199805/page.htm"},
        { id: 6, name: '上海市机械工程创新大赛上海理工大学预选赛', time: '上海理工大学机械学院', level: '校级',url:"http://me.usst.edu.cn/2019/1023/c3262a194490/page.htm"},
      ],
      recommend:[
        { id: 1, name: '“飞思卡尔杯”全国大学生智能车竞赛', time: '高等学校自动化专业教学指导分委员会', level: '国家A级',url:"http://www.eepw.com.cn/event/action/freescale_car2012/"},
        { id: 2, name: '中国机器人大赛', time: '中国自动化学会', level: '国家A级',url:"http://crc.drct-caa.org.cn/index.php/race?catid=3"},
        { id: 3, name: '中国大学生程序设计竞赛', time: '中国大学生程序设计竞赛协会', level: '国家A级',url:"https://ccpc.io/"},
        {id: 4, name: '大学生数学建模竞赛(CUMCM)', time: '教育部高等教育司 、中国工业与应用数学学会', level: '国家A级',url:"http://www.mcm.edu.cn/"},
        { id: 5, name: '全国大学生英语竞赛（NECCS）', time: '高等学校大学外语教学指导委员会，高等学校大学外语教学研究会', level: '国家A级' ,url:"http://www.chinaneccs.cn/"},
        { id: 6, name: '全国高校计算机能力挑战赛', time: '全国高等学校计算机教育研究会', level: '国家A级',url:"http://www.ncccu.org.cn/"},
      ],
    }
  },
  methods: {
    linkTo(){
      let activeIndex = this.$refs.carousel.activeIndex;
      console.log(this.$refs.carousel)
      window.open(this.imglist[activeIndex].link);
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    enter: function () {
      this.active = 'color:lightblue'
    },
    // 点击加载更多比赛
    loadmore (str) {
      if (str === 'number') { this.number += 6 } else if (str === 'English') { this.English += 6 } else if (str === 'Math1') { this.Math1 += 6 } else if (str === 'Devise') { this.Devise += 6 } else if (str === 'Computer') { this.Computer += 6 } else if (str === 'Bigdata') { this.Bigdata += 6 }
    },
    details(item){
      window.open(item.url)
    }
  }
}
</script>

<style lang="less" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-carousel__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .carousel-image {
    width: 100%;
    height: 100%;
  }
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #99a9bf;
}
</style>
